<template>
  <div ref="follower" class="mouse-follower" :style="followerStyle"></div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';

const follower = ref(null);
const mouseX = ref(0);
const mouseY = ref(0);
const followerX = ref(0);
const followerY = ref(0);

const followerStyle = computed(() => {
  return {
    transform: `translate(${followerX.value}px, ${followerY.value}px)`,
  };
});

let animationFrameId = null;

const updateMousePosition = (e) => {
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
};

const updateFollowerPosition = () => {
  // 添加一些延迟，使跟随效果更平滑
  const dx = mouseX.value - followerX.value;
  const dy = mouseY.value - followerY.value;
  
  followerX.value += dx * 0.1;
  followerY.value += dy * 0.1;
  
  animationFrameId = requestAnimationFrame(updateFollowerPosition);
};

onMounted(() => {
  window.addEventListener('mousemove', updateMousePosition);
  updateFollowerPosition();
});

onBeforeUnmount(() => {
  window.removeEventListener('mousemove', updateMousePosition);
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
  }
});
</script>

<style scoped>
.mouse-follower {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: width 0.3s, height 0.3s;
}

</style>